<template>
    <h2>显示用户信息列表</h2>
    登录名称<input type="text" v-model="uname">
    角色名称<input type="text" v-model="tname">
    <button @click="Show">查询</button>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>用户编号</th>
                <th>登录名称</th>
                <th>角色名称</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <th>{{ item.Uid }}</th>
                <th>{{ item.Uname }}</th>
                <th>{{ item.Tname }}</th>
            </tr>
        </tbody>
    </table>
    当前是第{{ page.pageIndex }}页，每页显示{{ page.pageSize }}条数据，总共{{ page.listCount }}条数据
    <hr>
    <a href="#" @click="Pages(1)">首页</a>
    <a href="#" @click="Pages(2)">上一页</a>
    <a href="#" @click="Pages(3)">下一页</a>
    <a href="#" @click="Pages(4)">末页</a>
    
    <input type="text" v-model="tz">
    <button  @click="Pagest()">跳转</button>
    
    <hr>
    
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { useStore } from '../../store/index.ts';


const store = useStore();
const router = useRouter();
const route = useRoute();

const info = ref({
    Uname: '',
    Uid: 0,
    Tname: '',
});

const page = ref({
    pageSize:2,
    pageIndex:1,
    listCount:0,
    pageCount:0,
})
const uname = ref('');
const tname = ref('');

onMounted(() => {
    Show();
})

const Show = () => {
    axios({
        method: 'get',
        url: 'http://localhost:61498/api/UserInAll/UserShow',
        params: {
            uname:uname.value,
            tname:tname.value,
            pageSize:page.value.pageSize,
            pageIndex:page.value.pageIndex,
        }
    }).then(res => {
        info.value = res.data.Plist;
        page.value.listCount = res.data.listCount;
        page.value.pageCount = res.data.pageCount;
        console.log(res.data);
    })
       
        .catch(err => {
            console.log(err);
        })
}

const Pages = (msg:number) => {
    switch(msg){
        case 1:
            page.value.pageIndex=1;
            break;
        case 2:
            page.value.pageIndex--;
            if(page.value.pageIndex<1){
                page.value.pageIndex=1;
                alert("已经是第一页了")
            }
            break;
        case 3:
            page.value.pageIndex++;
            if(page.value.pageIndex>page.value.pageCount){
                page.value.pageIndex=page.value.pageCount;
                alert("已经是最后一页了")
            }
            break;
        case 4:
            page.value.pageIndex=page.value.pageCount;
            break;
    }
        
    Show();
}

const tz = ref('');
const Pagest = () => {
    if(tz.value>page.value.pageCount){
        alert("超出范围了");
        page.value.pageIndex=page.value.pageCount;
    }else if(tz.value<1){
        alert("超出范围了");
        page.value.pageIndex=1;
    }else{
        page.value.pageIndex=tz.value;
    }
    Show();
}



</script>
